<template>
  <div class="home">
    <div>
      <el-table
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="inbound_no"
          label="入库号"
          sortable
          width="180">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="patch_no"-->
<!--          label="批次号"-->
<!--          sortable-->
<!--          width="180">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="warehouse"
          label="库位">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="product_name"-->
<!--          label="产品名">-->
<!--        </el-table-column>-->

        <el-table-column
          prop="amount"
          label="预报数量">
        </el-table-column>
        <el-table-column
          prop="amount_act"
          label="实际入库数量">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="bf"-->
<!--          label="效期">-->
<!--        </el-table-column>-->

        <el-table-column
          prop="timestamp"
          label="生成日期">
        </el-table-column>

        <el-table-column
          label="操作(暂未开放)">
          <template slot-scope="scope">

            <el-button size="mini" @click.native.prevent="sub_inbound_act (scope.row.inbound_no)">入库</el-button>
            <el-button size="mini" @click="dia_true(scope.row.inbound_no)">修改批次号</el-button>
            <el-button size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.list.length">
      </el-pagination>
    </div>
    <template>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>请输入更新后的批次号</span>
      <el-input v-model=patch_no></el-input>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="req_bound_no">确 定</el-button>
    </span>
      </template>
    </el-dialog>
    </template>
  </div>
</template>

<script>
  import { inbound_record } from '../../api/inbound'
  import { req_patch }  from '../../api/inbound'

  export default {
    name: 'inbound_record',
    data() {
      return {
        inbound_no :'',
        patch_no : '',
        dialogVisible: false,
        user: true,
        list: [],
        pagesize: 10,
        currentPage: 1
      }
    },
    mounted() {
      this.check_inbound_record()
    },
    methods: {
      check_inbound_record() {
        inbound_record().then(res => {
            // console.log(res["list"])
            this.list = res['list']
          }
        )
      },
      sub_inbound_act(patch_no) {
        console.log(patch_no)
        this.$router.push({ path: '/inbound/inbound_act', query: { inbound_no: patch_no } })
      },

      handleSizeChange: function(size) {
        this.pagesize = size
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
      },
      dia_true (val){
        this.patch_no = ''
        this.dialogVisible = true;
        this.inbound_no = val

        console.log(this.inbound_no)
      },
      req_bound_no (){
        var req = {
          inbound_no: this.inbound_no,
          patch_no: this.patch_no,
        }
        req_patch(req).then(response =>{
          this.$message('修改成功')
          }
        )
        this.dialogVisible = false;
        location.reload()

      },

    }

  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
